<template>
  <div class="main-container" v-loading="loading" element-loading-text="努力加载中...">
    <div class="content-container">
      <div class="title-container">
        <div class="title-text">心率</div>
      </div>
      <div class="heartRateAnalysisCard">
        <el-row class="heartRateAnalysis">
          <el-col class="analysisBegin" :span="5" style="background-color: #FCDAEB">
            <el-text size="large" style="font-weight: bolder">心率分析</el-text>
          </el-col>
          <el-col class="analysisCenter" :span="6">
            <el-row class="analysisCenterItem">
              <font-awesome-icon size="1x" class="icon-low" :icon="['fas','fa-arrow-circle-down']"></font-awesome-icon>
              <el-text>低：{{ currentUserHeartRateData.minLowest }}bpm</el-text>
            </el-row>
            <el-row class="analysisCenterItem">
              <el-text>偏低</el-text>
            </el-row>
          </el-col>
          <el-col class="analysisCenter" :span="6">
            <el-row class="analysisCenterItem">
              <font-awesome-icon class="icon-normal" :icon="['fas','fa-grin']"></font-awesome-icon>
              <el-text>均：{{ currentUserHeartRateData.averageAverage }}bpm</el-text>
            </el-row>
            <el-row class="analysisCenterItem">
              <el-text>正常</el-text>
            </el-row>
          </el-col>
          <el-col class="analysisEnd" :span="6">
            <el-row class="analysisCenterItem">
              <font-awesome-icon class="icon-high" :icon="['fas','fa-arrow-circle-up']"></font-awesome-icon>
              <el-text>高：{{ currentUserHeartRateData.maxHighest }}bpm</el-text>
            </el-row>
            <el-row class="analysisCenterItem">
              <el-text>偏高</el-text>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="rateGraphHeader">
        <el-text class="rateGraphTitle" size="large">不同睡眠时期的心率：</el-text>
      </div>
      <div class="chart-wrapper">
        <div class="chart-container">
          <div class="chart" id="HRSChart"></div>
        </div>
      </div>

      <!--  心率时分图-->
      <div class="rateGraphHeader">
        <el-text class="rateGraphTitle" size="large">心率分时图：</el-text>
      </div>
      <div class="chart-wrapper">
        <div class="chart-container">
          <div class="chart-container" id="HRTSChart"></div>
        </div>
      </div>

      <!--  血氧时分图-->
      <!-- 血氧时分图 -->
      <div v-if="hasOxygenData">
        <div class="rateGraphHeader">
          <el-text class="rateGraphTitle" size="large">血氧分时图：</el-text>
        </div>
        <div class="chart-wrapper oxygen-chart-wrapper">
          <div class="chart-container">
            <!-- 血氧时分图 -->
            <div class="chart" id="OXTSChart2"></div>
            <!-- 统计数据 -->
            <div class="stats-container">
              <div class="stat-item " :class="getStatusClass(minOxygen)">
                <el-text class="stat-title">最低血氧</el-text>
                <el-text class="stat-value min-oxygen-value">{{minOxygen}}%</el-text>
              </div>
              <div class="stat-item max-oxygen-box" :class="getStatusClass(maxOxygen)">
                <el-text class="stat-title">最高血氧</el-text>
                <el-text class="stat-value max-oxygen-value">{{ maxOxygen }}%</el-text>
              </div>
              <div class="stat-item avg-oxygen-box" :class="getStatusClass(avgOxygen)">
                <el-text class="stat-title">平均血氧</el-text>
                <el-text class="stat-value avg-oxygen-value">{{ avgOxygen }}%</el-text>
              </div>
            </div>
          </div>
        </div>
      </div>




      <div class="evaluation-wrapper">
        <div class="evaluation-content">
          <div class="evaluation-header">
            <div class="icon">
              <font-awesome-icon :icon="['fas','fa-file-alt']" size="2x" class="icon-color"></font-awesome-icon>
            </div>
            <div class="evaluation-title">心率评估结果：</div>
            <el-button v-if="enableEdit" class="edit-button" @click="showEditInput">
              <font-awesome-icon :icon="['fas','fa-pencil-alt']" class="edit-icon"></font-awesome-icon>
              <el-text class="edit-text">编辑</el-text>
            </el-button>
          </div>
          <div class="evaluation-body">
            <el-input type="textarea" class="evaluation-input" v-model="currentUserHeartRateData.evaluation" v-if="editMode"></el-input>
            <el-text v-else :span="24" class="evaluation-display">
              {{ currentUserHeartRateData.evaluation }}
            </el-text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import '@/assets/css/reportCard.css';
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import * as echarts from 'echarts';
import {markRaw, onMounted, onUnmounted, ref, watch} from "vue";
import sleepData from "@/api/sleepData.js";
import {ElMessage} from "element-plus";
onMounted(() => {
  // 优先从缓存加载心率数据
  loadHeartData(props.currentReportId);
  // 优先从缓存加载血氧数据
  loadOxygenData(props.currentReportId);
  // getHeartData(props.currentReportId);
  // getOxygenDate(props.currentReportId);
  // 监听窗口大小变化
  window.addEventListener('resize', resizeCharts);

});
onUnmounted(()=>{
  if (currentUserHeartRateData.value.evaluation === evaluationBackup.value){
  }else {
    const updateHeartRateDto = {
      reportId: props.currentReportId,
      evaluation: currentUserHeartRateData.value.evaluation
    }
    sleepData.updateHeartEvaluate(updateHeartRateDto).then((res)=>{
      if (res.data.code === 200){
      }
    }).catch((err)=>{
      console.log(err)
    })
  }
  disposeChart()
});
const props = defineProps({
  currentReportId: Number,
  enableEdit:Boolean
});
watch(() => props.currentReportId, (newId) => {
  // 加载心率数据
  loadHeartData(newId);
  // 加载血氧数据
  loadOxygenData(newId); // 传入新的 reportId
  // getOxygenDate(newId);
  // getHeartData(newId);
});
watch(() => props.enableEdit, (newValue) => {
  enableEdit.value = newValue
});
const enableEdit = ref(props.enableEdit)
const loading = ref(false)
const evaluationBackup = ref('')

const saveHeartData = (data) => {
  const cache = {
    data,
    timestamp: new Date().getTime(), // 当前时间戳
  };
  localStorage.setItem('heartData', JSON.stringify(cache));
};

const loadHeartData = (reportId) => {
  const cachedData = JSON.parse(localStorage.getItem('heartData'));
  if (cachedData) {
    const now = new Date().getTime();
    const cacheDuration = 5 * 60 * 1000; // 5 分钟（单位：毫秒）
    if (now - cachedData.timestamp < cacheDuration) {
      // 缓存未过期，使用缓存数据
      const heartData = cachedData.data;

      const awake = heartData.awake;
      const rem = heartData.rem;
      const deepSleep = heartData.deepSleep;
      const lightSleep = heartData.lightSleep;

      const lowestArray = [awake.lowest, rem.lowest, deepSleep.lowest, lightSleep.lowest];
      const averageArray = [awake.average, rem.average, deepSleep.average, lightSleep.average];
      const highestArray = [awake.highest, rem.highest, deepSleep.highest, lightSleep.highest];

      createHRState(lowestArray, averageArray, highestArray);
      createHRTSChart(heartData.heartTime);

      const averageAverage = (awake.average + rem.average + deepSleep.average + lightSleep.average) / 4;
      const minLowest = Math.min(...lowestArray);
      const maxHighest = Math.max(...highestArray);

      currentUserHeartRateData.value = {
        lowest: heartData.lowest,
        average: heartData.average,
        highest: heartData.highest,
        averageAverage: averageAverage.toFixed(1),
        minLowest: minLowest.toFixed(1),
        maxHighest: maxHighest.toFixed(1),
        evaluation: heartData.evaluation,
      };
    } else {
      // 缓存过期，清除缓存并重新加载
      localStorage.removeItem('heartData');
      getHeartData(reportId); // 使用传入的 reportId
    }
  } else {
    // 如果没有缓存数据，重新加载
    getHeartData(reportId); // 使用传入的 reportId
  }
};
const getHeartData = (reportId) => {
  loading.value = false;
  sleepData.getHeartData(reportId).then((res) => {
    const heartData = res.data.data;
    evaluationBackup.value = currentUserHeartRateData.value.evaluation;

    const awake = heartData.awake;
    const rem = heartData.rem;
    const deepSleep = heartData.deepSleep;
    const lightSleep = heartData.lightSleep;

    const lowestArray = [awake.lowest, rem.lowest, deepSleep.lowest, lightSleep.lowest];
    const averageArray = [awake.average, rem.average, deepSleep.average, lightSleep.average];
    const highestArray = [awake.highest, rem.highest, deepSleep.highest, lightSleep.highest];

    createHRState(lowestArray, averageArray, highestArray);
    createHRTSChart(heartData.heartTime);

    const averageAverage = (awake.average + rem.average + deepSleep.average + lightSleep.average) / 4;
    const minLowest = Math.min(...lowestArray);
    const maxHighest = Math.max(...highestArray);

    currentUserHeartRateData.value = {
      lowest: heartData.lowest,
      average: heartData.average,
      highest: heartData.highest,
      averageAverage: averageAverage.toFixed(1),
      minLowest: minLowest.toFixed(1),
      maxHighest: maxHighest.toFixed(1),
      evaluation: heartData.evaluation,
    };

    // 保存心率数据到 LocalStorage
    saveHeartData(heartData);
  }).catch((err) => {
    console.log(err);
  }).finally(() => {
    loading.value = false;
  });
};

const minOxygen = ref(0); // 最低血氧
const maxOxygen = ref(0); // 最高血氧
const avgOxygen = ref(0); // 平均血氧
const hasOxygenData = ref(false); // 新增：是否有血氧数据的标志

// 修改 loadOxygenData 函数
const loadOxygenData = (reportId) => {
  const cachedData = JSON.parse(localStorage.getItem('oxygenData'));
  if (cachedData) {
    const now = new Date().getTime();
    const cacheDuration = 5 * 60 * 1000;
    if (now - cachedData.timestamp < cacheDuration) {
      hasOxygenData.value = true; // 有缓存数据
      createOXTSChart(cachedData.data);
      const oxygenValues = cachedData.data.oxygenValues.map(value => value * 100);
      minOxygen.value = Math.min(...oxygenValues).toFixed(1);
      maxOxygen.value = Math.max(...oxygenValues).toFixed(1);
      avgOxygen.value = (oxygenValues.reduce((sum, value) => sum + value, 0) / oxygenValues.length).toFixed(1);
    } else {
      localStorage.removeItem('oxygenData');
      getOxygenDate(reportId);
    }
  } else {
    getOxygenDate(reportId);
  }
};
const saveOxygenData = (data) => {
  const cache = {
    data,
    timestamp: new Date().getTime(), // 当前时间戳
  };
  localStorage.setItem('oxygenData', JSON.stringify(cache));
};

// 修改 getOxygenDate 函数
const getOxygenDate = (reportId) => {
  loading.value = false;
  sleepData.getOxygenDate(reportId).then((res) => {
    if (res.data.code === 200 && res.data.data) {
      const oxygenData = res.data.data;
      hasOxygenData.value = oxygenData.oxygenValues && oxygenData.oxygenValues.length > 0; // 判断是否有数据
      if (hasOxygenData.value) {
        createOXTSChart(oxygenData);
        saveOxygenData(oxygenData);
        const oxygenValues = oxygenData.oxygenValues.map(value => value * 100);
        minOxygen.value = Math.min(...oxygenValues).toFixed(1);
        maxOxygen.value = Math.max(...oxygenValues).toFixed(1);
        avgOxygen.value = (oxygenValues.reduce((sum, value) => sum + value, 0) / oxygenValues.length).toFixed(1);
      }
    } else {
      hasOxygenData.value = false;
    }
  }).catch((err) => {
    console.log(err);
    hasOxygenData.value = false;
  }).finally(() => {
    loading.value = false;
  });
};

// 根据血氧值返回对应的 CSS 类名
const getStatusClass = (oxygenValue) => {
  if (oxygenValue >= 90) {
    return 'stat-good'; // 血氧正常
  } else if (oxygenValue >= 80 && oxygenValue < 90) {
    return 'stat-warning'; // 血氧偏低
  } else {
    return 'stat-danger'; // 血氧过低
  }
};


//图表创建
const HRSChartInstance = ref(null);
const HRTSChartInstance = ref(null);
const OXTSChartInstance = ref(null);
const createHRState = (lowestArray, averageArray, highestArray) => {
  HRSChartInstance.value = markRaw(echarts.init(document.getElementById("HRSChart")));
  HRSChartInstance.value.setOption({
    grid: {
      left: '5%',
      right: '5%',
      top: '15%',
      bottom: '0%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return `${params.seriesName}<br/>时期: ${params.name}<br/>bpm: ${params.value}`;
      }
    },
    legend: {
      data: ['低', '均', '高'],
      top: '0%', // 将图例放置在底部
      textStyle: {
        color: '#333',
        fontSize: 12
      }
    },
    xAxis: {
      type: 'category',
      data: ['觉醒期', 'REM期', '熟睡期', '浅睡期'],
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 70,
      interval: 10,
    },
    series: [
      {
        name: '低',
        type: 'bar',
        data: lowestArray, // 低心率的数据，每个睡眠阶段的持续时间
        itemStyle: {
          color: '#5270C3' // 配置低心率条形图的颜色
        }
      },
      {
        name: '均',
        type: 'bar',
        data: averageArray, // 均匀心率的数据，每个睡眠阶段的持续时间
        itemStyle: {
          color: '#90CB75' // 配置均匀心率条形图的颜色
        }
      },
      {
        name: '高',
        type: 'bar',
        data: highestArray, // 高心率的数据，每个睡眠阶段的持续时间
        itemStyle: {
          color: '#FAC75B' // 配置高心率条形图的颜色
        }
      },
    ],
  }, true);
};

//心率时分图
const createHRTSChart = (heartTime) => {
  const { startTime, frequency, heartValues } = heartTime;
  const times = heartValues.map((_, index) => {
    const date = new Date(startTime + index  * 1000);
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
  });

  const uniqueTimes = Array.from(new Set(times));
  HRTSChartInstance.value = markRaw(echarts.init(document.getElementById("HRTSChart"), "purple-passion"));
  HRTSChartInstance.value.setOption({
    grid: {
      left: '5%',
      right: '5%',
      top: '5%',
      bottom: '10%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: times,
      axisLabel: {
        formatter: function(value) {
          return value; // 直接返回格式化后的时间
        }
      }
    },
    yAxis: {
      type: 'value',
      min: Math.floor(Math.min(...heartValues)) - 5, // 根据实际情况设置最小心率，并向下取整
      max: Math.ceil(Math.max(...heartValues)) + 5, // 根据实际情况设置最大心率，并向上取整
      interval: 5,
      axisLabel: {
        formatter: function(value) {
          return value.toFixed(0); // 确保纵坐标显示整数
        }
      }
    },
    series: [
      {
        name: '心率',
        type: 'line',
        data: heartValues,
        symbol: 'none', // 去掉折线图中的点
        lineStyle: {
          color: '#FF4500', // 设置折线颜色为浅红色
          width: 2, // 设置折线宽度为2
        },
        areaStyle: {
          color: 'rgba(255, 69, 0, 0.1)', // 橙色区域填充
        },
        smooth: false, // 平滑曲线
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function (params) {
        const date = new Date(startTime + params[0].dataIndex * 1000);
        const time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
        const heartRate = params[0].value.toFixed(2); // 将心率值保留两位小数
        return `时间: ${time}<br/>心率: ${heartRate} bpm`; // 显示两位小数
      }
    },
    dataZoom: [{
      type: 'slider', // 滑块样式
      show: true,
      xAxisIndex: [0],
      start: 0, // 初始显示的范围
      end: 100,
      height: 12, // 滑块高度，避免过高遮挡
      bottom: '2%', // 滑块距离容器底部的距离
      handleSize: '80%', // 调整滑块手柄大小
      handleIcon: 'M10,10 L90,10 L90,90 L10,90 Z', // 自定义手柄形状
      handleStyle: {
        color: '#888', // 手柄颜色
        shadowBlur: 3,
        shadowColor: '#aaa',
        shadowOffsetX: 2,
        shadowOffsetY: 2,
      },
      textStyle: {
        color: '#666', // 滑块文字颜色
      },
    },
      {
        type: 'inside', // 鼠标滚轮缩放
        xAxisIndex: [0],
        start: 0,
        end: 100,
      },
    ],
  }, true);
};

//血氧时分图
const createOXTSChart = (oxygenData) => {
  const { startTime, frequency, oxygenValues: rawOxygenValues } = oxygenData;

  // 将原始数据（0.956）转换为百分比形式（95.6）
  const oxygenValues = rawOxygenValues.map(value => value * 100);

  // 生成时间轴
  const times = oxygenValues.map((_, index) => {
    const date = new Date(startTime + index * 1000);
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
  });

  // 初始化 ECharts 实例
  OXTSChartInstance.value = markRaw(echarts.init(document.getElementById("OXTSChart2"), "purple-passion"));

  // 设置图表配置
  OXTSChartInstance.value.setOption({
    grid: {
      left: '5%',
      right: '5%',
      top: '20%', // 调整顶部间距，为图例留出空间
      bottom: '10%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: times,
      axisLabel: {
        formatter: function (value) {
          return value; // 直接返回格式化后的时间
        }
      }
    },
    yAxis: {
      type: 'value',
      min: 75, // 最小值为 75%
      max: 100, // 最大值为 100%
      interval: 5, // 刻度间隔为 5%
      axisLabel: {
        formatter: function (value) {
          return `${value}%`; // 将 Y 轴的值显示为百分比
        }
      }
    },
    visualMap: {
      show: true, // 显示 visualMap 组件
      pieces: [
        {
          gt: 90, // 大于 90%
          lte: 100, // 小于等于 100%
          color: '#1E90FF', // 蓝色
          label: '血氧 > 90%' // 图例名称
        },
        {
          gt: 0, // 大于 0%
          lte: 90, // 小于等于 90%
          color: '#FFA500', // 橙色
          label: '血氧 ≤ 90%' // 图例名称
        }
      ],
      orient: 'horizontal', // 水平显示
      left: 'center', // 居中显示
      top: '5%', // 将图例放在图表顶部
      textStyle: {
        color: '#333', // 文字颜色
        fontSize: 12 // 文字大小
      }
    },
    series: [
      {
        name: '血氧',
        type: 'line',
        data: oxygenValues,
        symbol: 'none', // 去掉折线图中的点
        lineStyle: {
          width: 2, // 设置折线宽度为2
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(30, 144, 255, 0.1)', // 蓝色区域填充
              },
              {
                offset: 1,
                color: 'rgba(255, 165, 0, 0.1)', // 橙色区域填充
              },
            ],
          },
        },
        smooth: false, // 平滑曲线
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function (params) {
        const date = new Date(startTime + params[0].dataIndex * 1000);
        const time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
        return `时间: ${time}<br/>血氧: ${params[0].value.toFixed(1)}%`; // 显示一位小数
      }
    },
    dataZoom: [{
      type: 'slider', // 滑块样式
      show: true,
      xAxisIndex: [0],
      start: 0, // 初始显示的范围
      end: 100,
      height: 12, // 滑块高度，避免过高遮挡
      bottom: '2%', // 滑块距离容器底部的距离
      handleSize: '80%', // 调整滑块手柄大小
      handleIcon: 'M10,10 L90,10 L90,90 L10,90 Z', // 自定义手柄形状
      handleStyle: {
        color: '#888', // 手柄颜色
        shadowBlur: 3,
        shadowColor: '#aaa',
        shadowOffsetX: 2,
        shadowOffsetY: 2,
      },
      textStyle: {
        color: '#666', // 滑块文字颜色
      },
    },
      {
        type: 'inside', // 鼠标滚轮缩放
        xAxisIndex: [0],
        start: 0,
        end: 100,
      },
    ],
  }, true);
};


//图表自适应
const resizeCharts = () => {
  if (HRSChartInstance.value) {
    HRSChartInstance.value.resize();
  }
  if (HRTSChartInstance.value) {
    HRTSChartInstance.value.resize();
  }
  if (OXTSChartInstance.value) {
    OXTSChartInstance.value.resize();
  }
};
const disposeChart = ()=>{
  if (HRSChartInstance.value) {
    HRSChartInstance.value.dispose();
  }
  if (HRTSChartInstance.value) {
    HRTSChartInstance.value.dispose();
  }
  if (OXTSChartInstance.value && hasOxygenData.value) { // 只有有数据时才销毁血氧图表
    OXTSChartInstance.value.dispose();
  }
  // 移除事件监听器
  window.removeEventListener('resize', resizeCharts);
}

const editMode = ref(false)
const showEditInput = () => {
  editMode.value = !editMode.value;
};
const currentUserHeartRateData = ref({
  proportionList:{},
  evaluation:'在整夜睡眠中,入睡后心率波动在47.1-68.1次/分。可能存在心动过缓。'
});
const currentUserOxygenRateData = ref({
  proportionList:{}
});
</script>
<style scoped>
.main-container {
  width: 90%;
  height: 100%;
  background-color: #EFF2F9;
  border-radius: 20px;
}
.content-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-container {
  width: 100%;
  height: 5%;
  margin-top: 2%;
}
.title-text {
  font-size: 18px;
  height: 100%;
  margin-left: 20px;
  align-items: center;
  display: flex;
}
.heartRateAnalysisCard {
  width: 100%;
  height: 10%;
  margin-top: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.heartRateAnalysis {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: center;
}
.analysisBegin {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px 0 0 20px;
  background-color: white;
}
.analysisCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: white;
}
.analysisEnd {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: white;
  border-radius: 0 20px 20px 0;
}
.analysisCenterItem {
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-low {
  color: #FFDE00;
}
.icon-normal {
  color: #FE5997;
}
.icon-high {
  color: #FC8F42;
}
.rateGraphHeader {
  display: flex;
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.rateGraphTitle {
  margin-right: auto;
  margin-left: 20px;
}
.chart-wrapper {
  width: 100%;
  height: 25%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*.oxygen-chart-wrapper {*/
/*  min-height: 30%; !* 单独调整血氧时分图的高度 *!*/
/*}*/
.oxygen-chart-wrapper {
  width: 100%;
  min-height: 30%; /*!* 单独调整血氧时分图的高度 *!*!*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-container {
  width: 95%;
  height: 100%;
  border-radius: 20px;
  background-color: white;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: space-between; /* 上下分布 */
  /*padding: 10px; !* 内边距 *!*/
}

.chart {
  border-radius: 20px;
  width: 95%;
  height: 100%;
}
.evaluation-wrapper {
  width: 100%;
  height: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.evaluation-content {
  width: 95%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.evaluation-header {
  width: 100%;
  height: 30%;
  display: flex;
}
.icon {
  height: 100%;
}
.icon-color {
  color: #3DD986;
  margin-left: 10px;
  margin-right: 10px;
}
.evaluation-title {
  font-size: 17px;
  font-weight: 510;
}
.edit-button {
  height: 100%;
  margin-left: auto;
  background-color: #EFF2F9;
  border: none;
}
.edit-icon {
  color: #3DD986;
  margin-left: 10px;
  margin-right: 10px;
  width: 20px;
  height: 20px;
}
.edit-text {
  font-size: 17px;
  color: #3DD986;
}
.evaluation-body {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.evaluation-input {
  height: 100%;
  width: 95%;
}
.evaluation-display {
  width: 90%;
  font-size: 15px;
  margin-left: 30px;
  margin-top: 10px;
}

.stats-container {
  width: 93%;
  height: 20%; /* 统计数据占 20% 高度 */
  display: flex;
  flex-direction: row; /* 水平排列 */
  justify-content: space-around; /* 均匀分布 */
  align-items: center; /* 垂直居中 */
  background-color: white;
  border-radius: 20px;
  padding: 10px;
  gap: 20px;
  /*margin-top: 10px; !* 与血氧时分图的间距 *!*/
}

.stat-item {
  width: 25%; /* 每个统计项均匀分布 */
  text-align: center; /* 文字居中 */
  padding: 10px; /* 内边距 */
  margin: 0 5px; /* 左右间距 */
  border-radius: 10px;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
}
/* 最低血氧盒子（第一个子元素） */
.stat-item:first-child {
  background-color: #fff4e6;
  border: 1px solid #ff9500; /* 深橙色边框 */
}
/* 最高血氧盒子（第二个子元素） */
.stat-item:nth-child(2) {
  background-color: #e6ffed;
  border: 1px solid #34c759;
}
/* 平均血氧盒子（最后一个子元素） */
.stat-item:last-child {
  background-color: #fff4e6; /* 浅橙色背景 */
  border: 1px solid #ff9500; /* 深橙色边框 */
}
.min-oxygen-value {
  color: #ff9500; /* 文本颜色为橙色 */
}
.max-oxygen-value {
  color: #34c759; /* 文本颜色为橙色 */
}
.avg-oxygen-value{
  color: #ff9500; /* 文本颜色为橙色 */
}


.stat-title {
  font-size: 14px;
  font-weight: bold;
  color: #666;
}



/* 血氧状态样式 */
.stat-good {
  background-color: #e6f7e6; /* 正常状态背景色 */
  color: #52c41a; /* 正常状态文字颜色 */
}

.stat-warning {
  background-color: #fffbe6; /* 警告状态背景色 */
  color: #faad14; /* 警告状态文字颜色 */
}

.stat-danger {
  background-color: #ffe6e6; /* 危险状态背景色 */
  color: #ff4d4f; /* 危险状态文字颜色 */
}


</style>